<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
	 
			.div1{
 
				border: 1px solid red;
				background-color: gold; 
				margin: 10px;   /*等价于  margin-left   margin-top   margin-right  margin-bottom*/
			 	padding-top: 20px;  /*内边距上 右 下 左  都是填充20px*/
				padding-left: 10px;
				padding-bottom: 10px; 
				
				margin: 10px auto;/* 居中时，一定要设置 元素的宽度   高度*/
				
			}
			
			.div2{
				box-sizing: content-box;  /*设置盒子的整体高度     包含  边框，填充区，内容    */
				border: 4px dashed blue;
				padding: 10px;
				   
				  
			
			}
			
			.div3{   /*默认   子元素自动填充   父元素所有空间 */
				border: 5px solid black; 
			    
			}
			
			.child{
				 
			}
			
			#div5{
				padding: 20px;
				margin: 0px;
				border: 2px solid green;
			     display: table;/* 内容填满后，自动包裹 在整个div中，   */
			}
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2018-09-10
        	描述：
        	盒子模型
        	   一个元素在页面上占据的部分 是一个矩阵，也成为一个 模型 
        	 这个模型包含4个部分     边框，边距（外边距），填充区（内边距），内容区
        	 
        	 width height ： 默认是内容的高度
        	 
        	 padding : 20px
        	 等价于 ：  padding-left  padding-top  padding-right padding-bottom
        	 
        	 
        	 box-sizing ：   border-box 设置整个盒子的高度和宽度 
        	 				   width: = border*2+padding*2+内容去，   计算内容区域 =  100-4*2-10*2=72px
       		
       			          content-box  这是设置width ，hight是内容的宽度，高度 
       			                                               盒子实际高度 = 100+4*2+10*2
       			                                               
       			            inherit ： 规定从父元素 继承box-sizing的属性值                
       			            
       			 
        -->
       
       <div class="mydiv">
		参照物
	</div>
	<div class="div1">
		内容1<br/>
		内容1<br/>
		内容1<br/>
		内容1<br/>
		内容1<br/>
	</div>
	<div class="div2">
		内容2
	</div>
	
	<div class="div3">
		<span>div3 </span> 
		
		<div id="child">子元素</div>
		 
	</div>
	
	
	<div id="div5">
			包裹内容的情况下 　　这种情况下比较简单，内容的宽度按照内容计算，
			<br/>fdasfdsafds
		</div>
	</body>
	
</html>
